<div class="flex justify-between items-center mb-0">

  <ngm-search [formControl]="searchControl"></ngm-search>

  <div ngmButtonGroup>
    <button mat-raised-button color="primary" displayDensity="cosy"
      (click)="openUserSelect()"
      >
      <div class="flex items-center">
        <mat-icon fontSet="material-icons-outlined">add</mat-icon>
        {{ 'PAC.KEY_WORDS.ADD' | translate: {Default: 'Add'} }}
      </div>
    </button>
  </div>

</div>

<ngm-table class="mt-2 rounded-lg border border-gray-200 overflow-hidden"
  paging
  [data]="businessAreaUsers$ | async"
  [columns]="[
    {
      name: 'user',
      caption: 'PAC.KEY_WORDS.User' | translate: {Default: 'User'},
      cellTemplate: userTempl
    },
    {
      name: 'role',
      caption: 'PAC.KEY_WORDS.Role' | translate: {Default: 'Role'},
      cellTemplate: roleTempl
    },
    {
      name: 'action', 
      caption: 'PAC.KEY_WORDS.ACTION' | translate: {Default: 'Action'},
      cellTemplate: actionTempl
    }
  ]"
></ngm-table>

<ng-template #userTempl let-user>
  <pac-user-profile-inline [user]="user"></pac-user-profile-inline>
</ng-template>

<ng-template #roleTempl let-role>
  {{ BusinessAreaRole[role] }}
</ng-template>

<ng-template #actionTempl let-loading="loading" let-id="id" let-user="user">
  <button mat-icon-button *ngIf="!loading" ngmAppearance="danger" displayDensity="cosy" class="text-slate-500"
    (click)="removeUser(id, user)">
    <div class="flex items-center justify-center">
      <mat-icon fontSet="material-icons-outlined">delete</mat-icon>
    </div>
  </button>
</ng-template>
